<template>
  <a-card>
    <div class="table-page-search-wrapper">
      <a-row :gutter="20">
        <a-form layout="inline" :form="form" @submit="handleSubmit">
          <a-col :xxl="6" :xl="6" :lg="12" :sm="24">
            <a-form-item label="搜索">
              <a-input placeholder="请输入券ID/券名称/任务名称" v-decorator="['searchValue']"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xxl="6" :xl="6" :lg="12" :sm="24">
            <a-form-item label="任务状态">
              <a-select placeholder="全部" v-decorator="['taskStatus']">
                <a-select-option :value="item.id" v-for="item in statusOpt" :key="item.id">{{ item.name
                }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xxl="12" :xl="12" :lg="12" :sm="24">
            <a-form-item label="任务时间">
              <a-range-picker show-time format="YYYY-MM-DD HH:mm:ss" :locale="locale" :placeholder="['开始时间', '结束时间']" v-decorator="['time']" />
            </a-form-item>
          </a-col>
          <a-col :xxl="6" :xl="6" :lg="24" :sm="24">
            <a-form-item>
              <a-button type="primary" html-type="submit">搜索</a-button>
              <a-button type="primary" @click="resetForm" style="margin-left: 10px">重置</a-button>
              <a-button type="primary" @click="openModal" style="margin-left: 10px">新建</a-button>
            </a-form-item>
          </a-col>
        </a-form>

      </a-row>
    </div>
    <a-table bordered :columns="columns" :rowKey="record => record.id" :data-source="dataSource" :pagination="pagination"
      :scroll="{ x: true }" @change="handleTableChange" :loading="loading">
      <span slot="taskStatus" slot-scope="text, record">{{ record.taskStatus }}</span>
      <span slot="taskNameFilter" slot-scope="text, record">{{ record.taskName.length > 8 ? record.taskName.slice(0,8) + '...' : record.taskName }}</span>
      <template slot="actions" slot-scope="text, record">
        <a-button type="link" v-if="record.taskStatus != '已结束'" @click="openModal(record)">编辑</a-button>
        <a-button type="link" v-if="record.taskStatus == '已结束'" @click="openModal(record,true)">查看</a-button>
        <a-button type="link" @click="queryLog(record.id)">操作日志</a-button>
        <a-button type="link" v-if="record.taskStatus == '已结束'" @click="updateStatus(record.id, 3)">删除</a-button>
        <a-button type="link" v-if="record.taskStatus == '进行中'" @click="updateStatus(record.id, 2)">结束</a-button>
        <a-button type="link" v-if="record.taskStatus == '未开始'" @click="updateStatus(record.id, 1)">开启</a-button>
      </template>
    </a-table>
    <div v-if="showForm">
      <a-modal title="任务创建" width="60%" :visible="true" :footer="null" @cancel="closeForm()">
        <add  @close="closeForm" :disabled="disabled" :edit="editObj" />
      </a-modal>
    </div>

    <div v-if="showLog">
      <a-modal title="操作日志" width="60%" :visible="true" :footer="null" @cancel="closeLog()">
        <log  :taskId="taskId" @close="closeLog"></log>
      </a-modal>
    </div>
  </a-card>
</template>
<script>
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import { listMixin } from "../../micromall/util/listMixin";
import add from './form.vue'
import log from './log.vue'
import { postAction } from '@/api/manage'
import { updateTaskStatus } from '@/api/marketingCenter/couponTask'
import dayjs from 'dayjs'
const columns = [
  {
    title: '任务名称',
    width: 200,
    scopedSlots: { customRender: 'taskNameFilter' }
  },
  {
    title: '任务状态',
    width: 100,
    scopedSlots: { customRender: 'taskStatus' }
  },
  {
    title: '任务开始时间',
    width: 200,
    dataIndex: 'taskStartTime'
  },
  {
    title: '任务结束时间',
    width: 200,
    dataIndex: 'taskEndTime'
  },
  {
    title: '券ID',
    width: 100,
    dataIndex: 'awardId'
  },
  {
    title: '券名称',
    width: 200,
    dataIndex: 'voucherName'
  },
  {
    title: '券面值',
    width: 100,
    dataIndex: 'voucherAmt'
  },
  {
    title: '创建人',
    width: 100,
    dataIndex: 'creator'
  },
  {
    title: '创建时间',
    width: 200,
    dataIndex: 'createTime'
  },
  {
    title: '操作',
    width: 300,
    scopedSlots: { customRender: 'actions' },
    fixed: 'right',
  }
]

export default {
  mixins: [listMixin],
  data() {
    return {
      locale,
      statusOpt: [
        {
          name: '未开始',
          id: '未开始'
        },
        {
          name: '进行中',
          id: '进行中'
        },
        {
          name: '已结束',
          id: '已结束'
        }
      ],
      url: {
        list: '/jic-backend-pos/pos/voucherTask/list'
      },
      columns,
      spinning: false,
      loading: false,
      showForm: false,
      editObj: null,
      showLog: false,
      taskId: '',
      disabled: false
    }
  },
  components: {
    add, log
  },
  mounted() {
  },

  methods: {
    queryLog(taskId){
      this.taskId = taskId
      this.showLog = true
    },
    closeLog(){
      this.taskId = ''
      this.showLog = false
    },
    closeForm(refresh) {
      this.showForm = false
      this.editObj = null
      if (refresh) {
        this.loadData(1)
      }
    },
    openModal(item,disabled = false) {
      this.disabled = disabled
      if (item && item.awardId) {
        this.editObj = item
      }
      this.showForm = true
    },
    submitForm() { },

    onSelectChange(selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
    async getNum() {
      const res = await moreHandleNum()
      this.perfectNum = res.data
    },
    async updateStatus(taskId, operateType) {
      const { realname:operatorName, workNo:operatorId } = this.$store.getters.userInfo
      const params = {
        taskId,
        operateType,
        operateValue:operateType == 2 ? false :true,
        operator:{ operatorName, operatorId }
      }
      if (operateType == 3) {
        this.$confirm({
          content: '确定要删除该条数据吗',
          cancelText: '暂不',
          onOk: res => {
            return new Promise(async (resolve, reject) => {
              const res = await updateTaskStatus(params)
              if (res.code == 200) {
                this.reCalculatePage(1)
                this.loadData()
                this.$message.success('操作成功')
                resolve(true)
              } else {
                this.$message.error(res.msg)
                reject(false)
              }
            })
          },
          onCancel() { }
        })
      }else{
        this.loading = true
        const res = await updateTaskStatus(params)
        if(res.code == 200){
          this.$message.success('操作成功')
          this.reCalculatePage(1)
          this.loadData()
        }else{
          this.loading = false
        }

      }
    },
    handleEdit(record, differencePage = 0) {
      const query = {
        id: record.id,
        differencePage,
        productNoMoreList: record.collocationProductList.map(item => item.productNoMore),
        status: this.type == 3 ? 3 : 2
      }
      console.log(query)
      this.$router.push({
        path: `/micromall/marketing/collocation/more/edit`,
        query: {
          obj: JSON.stringify(query)
        }
      })
    },
    loadData(arg) {
      if (!this.url.list) {
        this.$message.error('请设置url.list属性!')
        return
      }
      //加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.pagination.current = 1
      }
      var params = this.getQueryParams() //查询条件
      if(params.time && params.time.length > 0){
        params.startTime = dayjs(params.time[0]).format('YYYY-MM-DD HH:mm:ss')
        params.endTime = dayjs(params.time[1]).format('YYYY-MM-DD HH:mm:ss')
        delete params.time
      }
      postAction(this.url.list, params).then(res => {
        if (res.code == 200) {
          //update-end---author:wsp    Date:20210826
          this.dataSource = res.data.records || res.data
          if (res.data.total) {
            this.pagination.total = res.data.total
          } else {
            this.pagination.total = 0
          }
        } else {
          this.$message.warning(res.msg)
        }
        this.loading = false
      })
    },
  }
}
</script>
<style scoped>
.goods-img {
  width: 50px;
  height: 50px;
}

.goods-img:not(:last-child) {
  margin-right: 10px;
}
</style>
